<template>
    <div class="container" ref="container">
        <van-overlay :show="showOverlay"/>
        <van-loading v-show="showOverlay" size="12vw" color="white" class="loading" vertical/>
        <div class="top">
            <img src="@/assets/images/bg-1.png" class="bg">
            <div class="logo">
                <img src="@/assets/images/tju-logo.svg">
                <img src="@/assets/images/tju-word.svg">
            </div>
        </div>
        <div class="mid" ref="mid">
            <div class="welcome">第十二届天津大学世界校友代表大会<br>邀请全球天大人为母校送上祝福</div>
            <div class="input">您是
                <input placeholder="请输入" class="grade-input-input" autofocus="autofocus" v-model="grade">
                级校友
            </div>
        </div>
        <div class="bottom" ref="bottom">
            <div class="location-input">您是居住在
                <div style="width:40vw;border-bottom:solid white 1px;margin:0 4px 6px 4px; color:#3273bd; cursor: pointer;"
                    @click.stop="getLocation()">
                    <!-- <img src="@/assets/images/location.svg" style="width: 2.5rem;"> -->
                    <van-icon name="location-o" color="#3273bd" size="2.5rem"/>
                    {{ locationName }}
                </div>
            </div>
            <div class="click-button" v-if="(locationName!=='点击获取定位')&&(grade!=='')" @click.stop="toMap()">查看全球祝福</div>
            <div class="change-view" v-if="(locationName!=='点击获取定位')&&(grade!=='')">为了保障您的观看体验，下一页请横屏观看
                <img src="@/assets/images/change-view.svg" width="14px">
            </div>
        </div>
        <van-notify v-model="showNotify" type="danger">
            <van-icon name="close" style="margin-right: 4px;" />
            <span>网络错误</span>
        </van-notify>
        <van-notify v-model="showNotifyNotFormal" type="danger">
            <van-icon name="close" style="margin-right: 4px;" />
            <span>年级输入不合法</span>
        </van-notify>
    </div>
</template>
<script>
import { savePosGra } from '../api/api';
import Cookies from 'js-cookie';
export default {
    name: 'getLocation',
    data() {
        return {
            grade: "",
            locationName: '点击获取定位',
            location: [0, 0],
            showOverlay: false,
            showNotify: false,
            showNotifyNotFormal: false,
        }
    },
    mounted() {
/*         let bg = document.querySelector('.bg')
        let height = bg.offsetHeight;
        bg.style.height = height;
        window.addEventListener('resize', () => {
            bg.style.height = height;
        }) */
        setTimeout(() => {
            let width = this.$refs.container.offsetWidth;
            let height = this.$refs.container.offsetHeight;
            //console.log(width + ' ' + height); 
            Cookies.set('con_width', width);
            Cookies.set('con_height', height);
        }, 500);
        function autoRootFontSize() {
            document.documentElement.style.fontSize = screen.height / 100 + 'px';
            // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是不是很简单
        }

        window.addEventListener('resize', autoRootFontSize);
        autoRootFontSize();
        //加过渡
        this.showContentTran();
    },
    methods: {
        sleep(delay) {
            return new Promise((resolve) => setTimeout(resolve, delay));
        },
        async showContentTran() {
            await this.sleep(100);
            this.$refs.mid.style.opacity = 1;
            this.$refs.bottom.style.opacity = 1; 
        }, 
        getLocation() {
/*             const _this = this
            //eslint-disable-next-line
            let ipLocation = new TMap.service.IPLocation();
            ipLocation.locate()
                .then((result) => {
                    console.log(result)  //获取当前主机的所在位置
                    _this.locationName = result.result.ad_info.nation + result.result.ad_info.province
                    _this.location = [result.result.location.lat, result.result.location.lng] //前者表示纬度，后者是经度
                }).catch((err) => {
                console.log(err)
            }) */
            this.showOverlay = true;
            let geolocation = new qq.maps.Geolocation("KF4BZ-AKBWW-Q4LRJ-OFBBU-DP336-EQFKY", "peiyang")
            geolocation.getLocation((pos) => {
                console.log(pos);
                this.locationName = pos.nation + pos.city
                this.location = [pos.lat, pos.lng]
                this.showOverlay = false;
            },(err) => {
                //获取定位失败的情况下
                //console.log(err.message);
                this.showNotify = true;
                this.showOverlay = false;
                setTimeout(() => {
                    this.showNotify = false;
                },2000);
            })
        },
        toMap() {
            //console.log(Object.is(Number(this.grade), NaN));
            let res = Number(this.grade);
            if (Object.is(res, NaN)) { //输入的不是数字
                this.showNotifyNotFormal = true;
                setTimeout(() => {
                    this.showNotifyNotFormal = false;
                },2000);
                return;
            } else if (res < 1895 || res > 2019) {
                this.showNotifyNotFormal = true;
                setTimeout(() => {
                    this.showNotifyNotFormal = false;
                },2000);
                return;
            }
            this.showOverlay = true;
            savePosGra({grade: this.grade, local: this.location[0] + ' ' + this.location[1]}).then((res) => {
                //console.log(res); 
                Cookies.set('lat', this.location[0]);
                Cookies.set('lng', this.location[1]);
                Cookies.set('grade', this.grade);
                Cookies.set('name', this.locationName);
                this.$router.push({
                    name: 'Home',
                    params: {
                        grade: this.grade,
                        lat: this.location[0],
                        lng: this.location[1],
                        name: this.locationName
                    }
                })
            },(err) => {
                this.showNotify = true;
                this.showOverlay = false;
                setTimeout(() => {
                    this.showNotify = false;
                },2000);
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.bg {
    left: 0;
    top: 0;
    height: 100rem;
    width: 100vw;
    position: fixed;
    z-index: -1;
    filter: brightness(90%) contrast(90%)
}
.top {
    display: flex;
    .logo {
        color: white;
        position: relative;
        left: 8%;
        z-index: 1;
        display: flex;
        flex-direction: row;

        > img:nth-child(1) {
            width: 12%;
        }

        > img:nth-child(2) {
            width: 24%;
            margin-left: -1%;
        }
    }
}

.mid {
/*     top: 40rem;
    line-height: 180%;
    font-size: 16px;
    letter-spacing: 1px;
    left: 0;
    color: white;
    width: 100%;
    position: absolute;
    z-index: 1; */
    display: flex;
    flex-direction: column;
    margin-top: 30vh;
    opacity: 0;
    transition: all 1s;
    .welcome {
        font-size: 4vw;
        line-height: 6vw;
        color: white;
    }
    .input {
        font-size: 4vw;
        color: white;
    }
}

/* .input {
    flex-direction: row;
    justify-content: center;
    display: flex;
    top: 56%;
    line-height: 180%;
    font-size: 14px;
    letter-spacing: 1px;
    left: 0;
    color: white;
    width: 100vw;
    position: absolute;
    z-index: 1;
} */
.bottom{
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    opacity: 0;
    transition: all 1s;
    .location-input {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        display: flex;
        font-size: 3.5vw;
        color: white;
    }
    .click-button {
        margin-top: 20px;
        font-size: 4vw;
        color: white;
        background: #2360A4;
        border-radius: 8px;
        z-index: 1;
        cursor: pointer;
        line-height: 8vw;
        height: 8vw;
        width: 40%;
        align-self: center;
    }
    .change-view {
        margin-top: 20px;
        font-size: 3vw;
        color: white;
    }
}
.grade-input {
    top: 55rem;
    line-height: 180%;
    font-size: 16px;
    letter-spacing: 1px;
    left: -3vw;
    color: white;
    width: 100vw;
    position: absolute;
    z-index: 1;
}

/* .location-input {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
    top: 61rem;
    line-height: 180%;
    font-size: 14px;
    letter-spacing: 1px;
    left: 0;
    color: white;
    width: 100%;
    position: absolute;
    z-index: 1;
} */

/* .click-button {
    text-align: center;
    line-height: 38px;
    height: 38px;
    bottom: 18rem;
    font-size: 18px;
    letter-spacing: 1px;
    left: 30%;
    color: white;
    width: 40%;
    position: absolute;
    background: #2360A4;
    border-radius: 8px;
    z-index: 1;
    cursor: pointer;
}

.change-view {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
    transform: scale(0.9);
    text-align: center;
    bottom: 10rem;
    font-size: 8px;
    font-weight: lighter;
    letter-spacing: 1px;
    color: white;
    width: 100%;
    position: absolute;
    z-index: 1;
}
 */
.grade-input-input {
    width: 60px;
    border: none;
    border-bottom: 1px solid white;
    background-color: transparent;
    color: white;
    outline: none;
    text-align: center;
    font-size: 3vw;
}
</style>
<style>
.loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}
</style>

